<template>
  <div>
    <!-- 导航 -->
    <van-nav-bar title="个人信息" left-arrow @click-left="$router.back()" />

    <!-- 用户信息展示 -->

    <!-- 头像 -->
    <!-- document.qs('input').click() -->
    <input
      type="file"
      hidden
      ref="input"
      accept=".png,.jpg"
      @change="onSlected"
    />
    <van-cell is-link title="头像" @click="$refs.input.click()">
      <van-image round width="0.8rem" height="0.8rem" :src="userInfo.photo" />
    </van-cell>

    <!-- 昵称 -->
    <van-cell is-link title="昵称" @click="isShowNcname = true">
      <span>{{ userInfo.name }}</span>
    </van-cell>

    <!-- 性别 -->
    <van-cell is-link title="性别" @click="isShowGender = true">
      <span> {{ userInfo.gender === 0 ? '男' : '女' }} </span>
    </van-cell>

    <!-- 生日 -->
    <van-cell is-link title="生日" @click="isShowBirthday = true">
      <span> {{ userInfo.birthday }} </span>
    </van-cell>

    <!-- 弹层 -->
    <!-- 更新头像 -->
    <van-popup
      v-model="isShowAvatar"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <update-avatar
        :photo="photo"
        @close="isShowAvatar = false"
        v-if="isShowAvatar"
        @update-photo=";[(userInfo.photo = $event), (isShowAvatar = false)]"
      ></update-avatar>
    </van-popup>
    <!-- 更新昵称的弹层 -->
    <van-popup
      v-model="isShowNcname"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <update-nickname
        v-if="userInfo.name && isShowNcname"
        :name.sync="userInfo.name"
        @close="isShowNcname = false"
      ></update-nickname>
      <!-- <update-nickname
        v-if="userInfo.name && isShowNcname"
        :name="userInfo.name"
        @update:name="userInfo.name = $event"
        @close="isShowNcname = false"
      ></update-nickname> -->
    </van-popup>

    <!-- 更新性别的弹层 -->
    <van-popup
      v-model="isShowGender"
      position="bottom"
      :style="{ height: '30%' }"
    >
      <update-gender
        v-if="userInfo.name && isShowGender"
        :gender.sync="userInfo.gender"
        @close="isShowGender = false"
      ></update-gender>
    </van-popup>

    <!-- 更新生日 -->
    <van-popup
      v-model="isShowBirthday"
      position="bottom"
      :style="{ height: '30%' }"
    >
      <!-- .sync修饰符 -->
      <!-- <update-birthday
        v-if="userInfo.birthday && isShowBirthday"
        :birthday.sync="userInfo.birthday"
        @close="isShowBirthday = false"
      ></update-birthday> -->

      <!-- <update-birthday
        v-if="userInfo.birthday && isShowBirthday"
        :birthday="userInfo.birthday"
        @update:birthday="userInfo.birthday = $event"
        @close="isShowBirthday = false"
      ></update-birthday> -->

      <!-- v-model -->
      <update-birthday
        v-if="userInfo.birthday && isShowBirthday"
        v-model="userInfo.birthday"
        @close="isShowBirthday = false"
      ></update-birthday>

      <!-- <update-birthday
        v-if="userInfo.birthday && isShowBirthday"
        :value="userInfo.birthday"
        @input="userInfo.birthday = $event"
        @close="isShowBirthday = false"
      ></update-birthday> -->
    </van-popup>
  </div>
</template>

<script>
import { getUserProfileAPI } from '@/api'
import { resolveToBase64 } from '@/utils'
import UpdateNickname from './components/UpdateNickname.vue'
import UpdateGender from './components/UpdateGender.vue'
import UpdateBirthday from './components/UpdateBirthday.vue'
import UpdateAvatar from './components/UpdateAvatar.vue'
export default {
  components: {
    UpdateNickname,
    UpdateGender,
    UpdateBirthday,
    UpdateAvatar
  },
  data() {
    return {
      userInfo: {},
      isShowNcname: false,
      isShowGender: false,
      isShowBirthday: false,
      isShowAvatar: false,
      photo: ''
    }
  },
  created() {
    this.getUserProfile()
  },
  methods: {
    async getUserProfile() {
      const { data } = await getUserProfileAPI()
      this.userInfo = data.data
    },
    async onSlected() {
      // 1. 获取用户选择的文件(保存在input.files)
      const file = this.$refs.input.files[0]

      // 2. 将file对象转成base64
      //  -  promise
      const base64 = await resolveToBase64(file)
      this.photo = base64

      // 3. 打开弹出层
      this.isShowAvatar = true

      // 4. 手动将input.vaue属性清空
      this.$refs.input.value = ''
    }
  }
}
</script>

<style></style>
